import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Table, Divider, Tag, Button} from 'antd';

import {exportExcel} from '../../api';
import action from '../../store/actions/instructionLibrary';
import leftNavAction from '../../store/actions/leftNav';

import './InstructionDetails.scss';

class InstructionDetails extends Component {
  state = {
    columns1: [
      {
        title: '物料名称',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '物料编码',
        dataIndex: 'invcode',
        key: 'invcode'
      }, {
        title: '品牌',
        dataIndex: 'brand',
        key: 'brand'
      }, {
        title: '型号',
        dataIndex: 'specs',
        key: 'specs'
      }, {
        title: '单位',
        dataIndex: 'main_measure',
        key: 'main_measure'
      }, {
        title: '物料组名称',
        dataIndex: 'mgroup_name',
        key: 'mgroup_name'
      }
    ],
    columns2: [
      {
        title: '物料名称',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '物料编码',
        dataIndex: 'invcode',
        key: 'invcode'
      }, {
        title: '品牌',
        dataIndex: 'brand',
        key: 'brand'
      }, {
        title: '型号',
        dataIndex: 'specs',
        key: 'specs'
      }, {
        title: '单位',
        dataIndex: 'main_measure',
        key: 'main_measure'
      }, {
        title: '物料组名称',
        dataIndex: 'mgroup_name',
        key: 'mgroup_name'
      }, {
        title: '供应商',
        dataIndex: 'vendor_name',
        key: 'vendor_name'
      }, {
        title: '数量',
        dataIndex: 'num',
        key: 'num'
      }, {
        title: '计划到货日期',
        dataIndex: 'demand_date',
        key: 'demand_date'
      }, {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark'
      }
    ],
    flag: false
  };

  initPages = () => {
    const {params} = this.props.match.params;
    const temp = JSON.parse(params);
    const {INSRUCTION_SINGLE_DATA, GET_INSTRUCTION_COUNT} = this.props;
    INSRUCTION_SINGLE_DATA(temp);
    GET_INSTRUCTION_COUNT(localStorage.getItem('username'));
    let flag = temp.type;
    if (flag === 1) {
      this.setState({
        flag: true
      });
    }
  };

  myExportExcel = (children) => {
    let type = JSON.parse(this.props.history.location.pathname.split('/')[2]).type;
    console.log(children, type);
    exportExcel(children, type).then(res => {
      window.open(res.data);
    }).catch(err => {
      console.log(err);
    });

  };

  componentDidMount() {
    this.initPages();
  }

  render() {
    const {instructionSingle} = this.props;
    const {children} = instructionSingle;
    const data = children;
    return (
      <div className='InstructionDetails'>
        {
          this.state.flag
            ?
            <Table columns={this.state.columns1} dataSource={data} pagination={false}/>
            :
            <Table columns={this.state.columns2} dataSource={data} pagination={false}/>
        }
        <div className='exportExcel'>
          <span>共计: {instructionSingle.count} 条</span>
          <Button type="primary" ghost onClick={() => this.myExportExcel(children)}>导出 Excel</Button>
        </div>

      </div>
    );
  }

}

const mapStateToProps = state => state.instructionLibrary;
export default connect(mapStateToProps, {...action, ...leftNavAction})(InstructionDetails);

